<template>
  <div class="container">
    <template v-if="authEdit">
      <div
        v-loading="loading"
        v-if="type === 'level'"
        :style="labelStyle"
        style="display: inline-flex;"
        element-loading-spinner="el-icon-loading"
        class="dropdown-link"
        @click="openEditLevel">
        <div :title="row.clientLevel" class="label ellipsisOne">{{ row.clientLevel || '--' }}</div>
        <i class="el-icon-arrow-down"/>
      </div>
      <el-dropdown v-else trigger="click" placement="top">
        <div
          v-loading="loading"
          :style="labelStyle"
          element-loading-spinner="el-icon-loading"
          class="dropdown-link check-user-loading-container">
          <div :title="type === 'level'?row.clientLevel: row.clientStatusStr" class="label ellipsisOne">{{ type === 'level'?row.clientLevel || '--': row.clientStatusStr || '--' }}</div>
          <i class="el-icon-arrow-down"/>
        </div>
        <el-dropdown-menu slot="dropdown" class="dropdown-menu">
          <el-dropdown-item
            v-for="(item, index) in listOptions"
            :disabled="type === 'level' && !canSelectLevel(item)"
            :key="index"
            :class="{'active': activeValue === item.value}"
            class="dropdown-item ellipsisOne"
            @click.native="handleClick(item)">
            {{ item.label }}
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </template>
    <div
      v-else
      :style="labelStyle"
      style="display: inline-block;"
      class="dropdown-link">
      <div :title="type === 'level'?row.clientLevel: row.clientStatusStr" class="ellipsisOne">{{ type === 'level'?row.clientLevel || '--': row.clientStatusStr || '--' }}</div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import { editClientStatus, editClientLevel } from '@/api/customer';
import { hasRouteAuth } from '@/utils/permission';
import { changeColorAlphaVal } from '@/utils/tools';

export default {
  props: {
    type: {
      type: String,
      default: 'level'
    },
    row: {
      type: Object,
      default: () => ({})
    },
    options: {
      type: Array,
      default: () => ([])
    }
  },
  data() {
    return {
      activeValue: '',
      loading: false
    };
  },
  computed: {
    ...mapState({
      'userInfo': state => state.user.userInfo
    }),
    // 调整等级
    authEdit() {
      if (this.type === 'level') {
        return hasRouteAuth('crm:customer:edit') && hasRouteAuth('crm:customer:levelInfoStore');
      } else {
        return hasRouteAuth('crm:customer:edit');
      }
    },
    listOptions() {
      return this.options;
    },
    labelStyle() {
      const color = this.type === 'level' ? this.row.levelColor : this.row.statusColor;
      return {
        color: color || '#333',
        background: color ? changeColorAlphaVal(color, 0.14) : 'transparent'
      };
    }
  },
  created() {
    this.activeValue = this.type === 'level' ? this.row.clientLevel : this.row.clientStatus;
  },
  methods: {
    changeColorAlphaVal,
    handleClick(item) {
      this.activeValue = item.value;
      this.editData();
    },
    openEditLevel() {
      this.$emit('openEditLevel', {
        customerName: this.row.clientName,
        levelName: this.row.clientLevel,
        customerId: this.row.id
      });
    },
    editData() {
      const api = this.type === 'level' ? editClientLevel : editClientStatus;
      const key = this.type === 'level' ? 'name' : 'clientStatus';
      const data = {
        id: this.row.id,
        [key]: this.activeValue
      };
      this.loading = true;
      api(data).then(res => {
        this.loading = false;
        if (res.code === 200) {
          this.$message.success('编辑成功');
          this.$emit('refresh');
        } else {
          this.$message.error(res.msg);
        }
      }).catch(() => {
        this.loading = false;
      });
    },
    // 等级有设置岗位且不包含当前用户岗位时，不可选
    canSelectLevel(data) {
      if (!data.post || (Array.isArray(data.post) && !data.post.length)) return true;
      return data.post.includes(this.userInfo.post);
    }
  }
};
</script>
<style lang="scss" scoped>
.dropdown-link {
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;

  padding: 0 10px;
  border-radius: 999px;
  color: #fff;
  height: 20px;
  line-height: 20px;
  max-width: 100%;
}
.label {
  max-width: calc(100% - 14px);
}
.dropdown-item {
  min-width: 80px;
  max-width: 240px;
  font-size: 14px;
  &.active {
    color: #406eff;
  }
}

.dropdown-menu {
  max-height: 200px;
  @include scrollBar($width: 4px);
}
.check-user-loading-container {
  &::v-deep {
    .el-loading-mask {
      display: flex;
      .el-loading-spinner {
        background-image: none !important;
        margin-top: 0 !important;
        top: 50%;
        left: 50%;
        width: 100%;
        height: 100%;
        transform: translate(-50%, -50%);
        @include flexStyle($align: center, $justify: center);
      }
    }
  }
}
.container {
  width: 100%;
  &::v-deep {
    .el-dropdown {
      max-width: 100%;
    }
  }
}
</style>
